<!--
 * @Author: hanqifeitb 8592865+hanqifeitb@user.noreply.gitee.com
 * @Date: 2025-03-05 13:21:53
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-04-08 22:50:02
 * @FilePath: /tianmu/nuxt-font/pages/personCenter/Center/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="centerBox">
    <div class="centerBox-left">
      <div
        v-for="(item, index) in leftMenus"
        :key="index"
        :class="[chooseItems === index ? 'active' : 'defaultStyle']"
        @click="handleChooseItem(index)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="centerBox-right">
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { usePersonCenterStore } from "@/stores/PersionCenter";
import PracticeRecord from "./PracticeRecord";
import MyVocabularyList from "./MyVocabularyList";
import MyShortAndLongSentences from "./MyShortAndLongSentences";
import MyPost from "./MyPost";
import OrderRecord from "./OrderRecord";
import LearningCenter from "./LearningCenter";
import MyActivities from "./MyActivities";
import MyPoints from "./MyPoints";
const personCenterStore = usePersonCenterStore();
const leftMenus = computed(() => personCenterStore.$state.leftMenus);
const chooseItems = ref(0);
const currentComponent = ref(PracticeRecord);
const route = useRoute();

onMounted(() => {
  init();
});

const init = () => {
  const { personCenterValue } = route.query;
  if (personCenterValue) {
    handleChooseItem(+personCenterValue);
  } else {
    handleChooseItem(0);
  }
};

const handleChooseItem = async (index) => {
  // 如果当前已经选中该项，不重复处理
  if (chooseItems.value === index) {
    return;
  }
  
  chooseItems.value = index || 0;
  const componentKeys = {
    0: PracticeRecord,
    1: MyVocabularyList,
    2: MyShortAndLongSentences,
    3: MyPost,
    4: LearningCenter,
    5: OrderRecord,
    6: MyActivities,
    7: MyPoints,
  };
  currentComponent.value = componentKeys[index];
};
</script>

<style lang="scss" scoped>
.centerBox {
  display: flex;
  margin-top: 15px;
  width: 100%;
  gap: 15px;

  &-left {
    width: 130px;
    min-width: 130px;
    background-color: #ffffff;
    border-radius: 5px;
    height: 385px;
    font-size: var(--default13px);
    cursor: pointer;

    .active {
      color: var(--main-color);
      margin: 18px 0 15px 13px;
      font-weight: bold;
    }
    .defaultStyle {
      color: #333333;
      margin: 18px 0 15px 13px;
      font-weight: 400;
    }
  }

  &-right {
    flex: 1;
    background-color: #ffffff;
    border-radius: 5px;
  }
}
</style>
